<template>
	<div class="spec-preview">
		<img :src="skuImageList[imgIndex].imgUrl" />
		<div class="event" @mousemove="handler"></div>
		<div class="big">
			<!-- 大图 -->
			<img :src="skuImageList[imgIndex].imgUrl" ref="big" />
		</div>
		<!-- 蒙版 -->
		<div class="mask" ref="mask"></div>
	</div>
</template>

<script>
export default {
	name: 'Zoom',
	data() {
		return {
			imgIndex: 0
		};
	},
	props: {
		skuImageList: {
			type: Array,
			default: function () {
				return [];
			}
		}
	},
	mounted() {
		// 拿到兄弟组件传递过来的图片索引，修改大图片的图片索引
		this.$bus.$on('changImg', val => {
			this.imgIndex = val;
		});
	},
	methods: {
		/**
		 * 放大镜功能
		 */
		handler(e) {
			let mask = this.$refs.mask;
			let big = this.$refs.big;
			// 使蒙版能够移动并使鼠标居蒙版中间
			let top = e.offsetY - mask.offsetHeight / 2;
			let left = e.offsetX - mask.offsetWidth / 2;

			// 约束移动范围
			if (top <= 0) top = 0;
			if (top >= mask.offsetHeight) top = mask.offsetHeight;
			if (left <= 0) left = 0;
			if (left >= mask.offsetWidth) left = mask.offsetWidth;

			// 赋值操作
			mask.style.top = top + 'px';
			mask.style.left = left + 'px';

			// 大图移动
			big.style.top = (-top * (big.offsetHeight / 2)) / mask.offsetHeight + 'px';
			big.style.left = (-left * (big.offsetWidth / 2)) / mask.offsetWidth + 'px';
		}
	}
};
</script>

<style lang="less">
.spec-preview {
	position: relative;
	width: 400px;
	height: 400px;
	border: 1px solid #ccc;

	img {
		width: 100%;
		height: 100%;
	}

	.event {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 998;
	}

	.mask {
		width: 50%;
		height: 50%;
		background-color: rgba(0, 255, 0, 0.3);
		position: absolute;
		left: 0;
		top: 0;
		display: none;
	}

	.big {
		width: 100%;
		height: 100%;
		position: absolute;
		top: -1px;
		left: 100%;
		border: 1px solid #aaa;
		overflow: hidden;
		z-index: 998;
		display: none;
		background: white;

		img {
			width: 200%;
			max-width: 200%;
			height: 200%;
			position: absolute;
			left: 0;
			top: 0;
		}
	}

	.event:hover ~ .mask,
	.event:hover ~ .big {
		display: block;
	}
}
</style>
